<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-model双向绑定</title>
</head>
<body>
    <div id="app">
        <!-- v-model结合input -->
        <input type="text" v-model="message">
        {{message}}
        <br>
        <input type="text" v-model="message2">
        {{message2}}
        <br>
        <h2>{{mes}}</h2>

        <!-- v-model结合radio，有了v-model='sex'可以省略name属性，sex有默认值：男，可省略checked -->
        <label for="male">
            <input type="radio" id="male"  value="男" v-model="sex">男
        </label>
        <label for="female">
            <input type="radio" id="female"  value="女" v-model="sex">女
        </label>
        <h2>你选择的性别是：{{sex}}</h2>


        <!-- v-model结合checkbox 单选-->
        <label for="xieyi">
            <input type="checkbox" id="xieyi" v-model="isagree">同意协议
        </label>
        <button :disabled="!isagree">下一步</button>
        <h2>你选择的是：{{isagree}}</h2>

             <!-- v-model结合checkbox 多选-->
  
            <input type="checkbox" value="篮球" v-model="hobbies">篮球
            <input type="checkbox" value="足球" v-model="hobbies">足球
            <input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
            <br>
            <label v-for="item in orignhobbies" :for="item">
                <input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}}
            </label>
      <h2>你的爱好是：{{hobbies}}</h2>

        



      <!-- v-model结合select 单选 -->
      <select name="abc" v-model="fruit">
          <option value="苹果" >苹果</option>
          <option value="香蕉">香蕉</option>
          <option value="梨子">梨子</option>
          <option value="葡萄">葡萄</option>
      </select>
      <h2>你选择的水果是：{{fruit}}</h2>


      <!-- v-model结合select 多选 -->
      <select name="bjk" v-model="fruits" multiple>
        <option value="苹果" >苹果</option>
        <option value="香蕉">香蕉</option>
        <option value="梨子">梨子</option>
        <option value="葡萄">葡萄</option>
    </select>
    <h2>你选择的水果是：{{fruits}}</h2>


    <!-- 修饰符 lazy,回车或失去焦点之后再改变-->
    <input type="text" v-model.lazy="lazymessage"><h2>回车或失去焦点后的值：{{lazymessage}}</h2>


    <!-- 修饰符 number 自动转化成数字-->
    <input type="text" v-model.number="number"><h2>你输入的数字是：{{number}}</h2>

    <!-- 修饰符 trim 去除前后空格-->
    <input type="text" v-model.trim="name"><h2>你输入的名字是：{{name}}</h2>



    </div>
    <script src="./vue.js"></script>
    <script>
        const app=new Vue({
            el:"#app",
            data:{
                message:"你好",
                message2:"vue",
                sex:"男",
                isagree:false,
                hobbies:[],
                orignhobbies:['篮球','足球','乒乓球'],
                fruit:'葡萄',
                fruits:[],
                lazymessage:'',
                number:'',
                name:''
            },
            methods: {
                
            },
            computed: {
                mes(){
                    return this.message +'--'+this.message2
                }
            },
        })
    </script>
</body>
</html>